<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <br>-->
    <br>
    <br>

    <button @click="brackClick('back')">返回上一页</button>
    ---------------->
    <button @click="brackClick('push')">返回用户中心</button>
    ---------------->
    <button @click="brackClick('replace')">replace</button>
    <hr>
    {{food}}
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  props: {
    food: {
      type: [String],
      default: "咸鸭蛋"
    }
  },
  methods: {
    brackClick(type) {
      // this.$router.go(-1); //后退一页
      if (type == "back") this.$router.back();
      else if (type == "push") {
        // push会在浏览历史中添加一列
        // 传参
        // 1.
        const uid = 200 + 1;
        this.$router.push({
          name: "user",
          params: {
            uid: uid
          },
          query: {
            uid: uid
          }
        });
        // 2.
        // const uid = 2000 + 1;
        // this.$router.push({
        //   path: `/u/${uid}?uid=${uid}`
        //   // path和params同时使用 会替换掉后面的params中的参数 使其无效
        // });
      } else if (type === "replace") {
        // replace会直接替换掉原来的页面
        this.$router.push({
          name: "about"
          // params: {
          //   uid: "001"
          // },
          // query: {
          //   uid: "10000000000"
          // }
        });
      }
    }
  }
};
</script>
